<!-- 用户管理 -->
<template>
  <div class="userstyle">
 
  <div class="container">
      <el-table :data="tickList" fit="true" height=690 style="padding: 10px 30px;">
      <el-table-column  prop="openid" label="openid" :show-overflow-tooltip="true">
        <template  #default=scope>
          <el-input type="text" v-model="scope.row.openid" v-show="scope.row.edit" />
          <span  v-show="!scope.row.edit">{{scope.row.openid}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="nickname" :show-overflow-tooltip="true">
        <template #default=scope>
          <el-input type="text" v-model="scope.row.nickname" v-show="scope.row.edit" />
          <span v-show="!scope.row.edit">{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="avatar" :show-overflow-tooltip="true">
        <template #default=scope>
          <el-input type="text" v-model="scope.row.avatar" v-show="scope.row.edit" />
          <span v-show="!scope.row.edit">{{scope.row.avatar}}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="gender" label="gender"   >
        <template #default=scope>
          <el-input type="text" v-model="scope.row.gender" v-show="scope.row.edit" />
          <span v-show="!scope.row.edit">{{scope.row.gender}}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="birthday" label="birthday"   >
        <template #default=scope>
          <el-input type="text" v-model="scope.row.birthday" v-show="scope.row.edit" />
          <span v-show="!scope.row.edit">{{scope.row.birthday}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="功能"  fixed="right" width="250">
        <template #default="scope">
          <el-button  size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="save(scope.row)">保存</el-button>
  
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
    </el-table-column>
      </el-table>
  <div class="block">
  <!-- 分页 -->
  <el-pagination
    
    style="background-color:aliceblue;"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="query.pagenum"
    :page-sizes="[5, 8, 9]"
    :page-size='query.pagesize'
    layout="total, sizes, prev, pager, next, jumper"
    :total="query.total">
  </el-pagination>
  </div>
  
  </div>
  <!-- 增加数据 -->
  <el-dialog title="新增用户" v-model="dialogTableVisible">
    <div class="con">
      <div class="users">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="openid" prop="openid">
      <el-input type="text" v-model="ruleForm.openid" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="nickname" prop="nickname">
      <el-input type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="avatar" prop="avatar">
      <el-input v-model="ruleForm.avatar"></el-input>
    </el-form-item>
    <el-form-item label="gender" prop="gender">
      <el-input v-model="ruleForm.gender"></el-input>
    </el-form-item>
    <el-form-item label="birthday" prop="birthday">
      <el-input v-model="ruleForm.birthday"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
      </div>
  </div>
  </el-dialog>
  </div>
  </template>
  
  <script>
  
    export default {
      data() {
        var checkMail = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('邮箱不能为空'));
          }
          callback()
        };
        var checkuser = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('用户名不能为空'));
          } else {
            callback();
          }
        };
        var checkPhone = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('电话不能为空'));
          }else {
            const reg = /^1[3456789]\d{9}$/
            if(reg.test(value)){
              callback();
  
            }else{
              return callback(new Error('请输入正确的手机号'))
            }
          }
        };
        var checkAddress =(rule, value, callback)=>{
          if (value === '') {
            callback(new Error('地址不能为空'));
          }else {
            callback();
          }       
        }
        return {
          tableData: [],
          dialogTableVisible:false,
          ruleForm: {
            openid: '',
            nickname: '',
            avatar: '',
            gender:'',
            birthday:''
          },
          query:{
            pagenum:1, //当前页码
            pagesize:5, //每页显示条数
            total:0
          },
  
          tickList:[],   //当前页数据
  
          rules: {
            user: [
              { validator: checkuser, trigger: 'blur' }
            ],
            phone: [
              { validator: checkPhone, trigger: 'blur' },
            ],
            mail: [
              { validator: checkMail, trigger: 'blur' },
              {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
            ],
            address:[
              { validator: checkAddress, trigger:'blur'}
            ]
          }
        }
      },
      methods: {
        //检查token
        checktoken(){
          let token = localStorage.getItem('token')
          this.$axios({
            method:'post',
            url:'token',
            data:token,
            headers:{'Authorization': localStorage.getItem('token')}
          }).then(res=>{
            let {code,msg} = res.data
            if(code==401){
              this.$router.push({name:'login'})
              this.$message.error(msg)
            }
  
          })
        },
        //当前页数据
        getPageInfo(){
          //清空tickList中的数据
          this.tickList=[];
          // 获取当前页的数据
          for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
            //把遍历的数据添加到tickList里面
            if(this.tableData){
              let data = this.tableData[i]
              this.tickList.push(data);
            }
            //判断是否达到一页的要求
            if(this.tickList.length===this.query.pagesize)break;
          }},
        //当页码或页面大小改变时触发回调
        handleSizeChange(newSize) {
          this.query.pagesize = newSize
          this.getPageInfo()
  
        },
        handleCurrentChange(newPage) {
          this.query.pagenum=newPage
          this.getPageInfo()
  
        },
          //编辑用户数据
          edit(row){
            row.edit = true
  
          },
          //保存
          async save(row){
  
            let {data} = this.$axios.post('updata',row)
            console.log(data);
            row.edit = false
          },
  
        //获取列表
          async getusers(){
              let {data} = await this.$axios.get('getusers')
              if(data.code == 200){
                  this.tableData = data.msg
                  this.query.total = data.msg.length
                  this.getPageInfo()  //获取当前页数据
              }
  
          },
          //删除
          async del({id}){
            let {data} = await this.$axios.post('deleteuser',{id})
            console.log(data);
            if(data.code==200){
              this.getusers()
            }
          },
  //新增数据
          submitForm(formName) {  
          this.$refs[formName].validate(async (valid) => { 
            if (valid) {
              console.log(this.ruleForm)
              let {data} = await this.$axios.post('addusers',this.ruleForm)
              
              if(data.code==200){
                this.getusers()
                this.dialogTableVisible =false
  
              }
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
  
      },
      mounted(){
          this.getusers()
          this.checktoken()
      }
    };
  </script>
  <style scoped>

  .container{
      margin: 0 0;
      padding: 0 0;
  }
  .toolbar{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
  }
  </style>
  